<template>
  <div class="container flex min-h-screen">
    <!-- 左侧导航栏 -->
    <div class="left-nav w-1/6 bg-gray-100 p-5">
      <div class="nav-item my-3" v-for="(menuItem, index) in filteredMenus" :key="index">
        <h3 v-if="menuItem.name" class="text-lg font-semibold text-gray-700">{{ menuItem.name }}</h3>
        <ul v-if="menuItem.children" class="list-none pl-3">
          <li v-for="(subItem, subIndex) in menuItem.children" :key="subIndex" class="py-2">
            <router-link v-if="subItem.route" :to="subItem.route" class="text-gray-600 hover:text-blue-500 transition-colors">{{ subItem.name }}</router-link>
          </li>
        </ul>
      </div>
    </div>

    <!-- 右侧主内容区 -->
    <div class="main-content flex-1 p-5 flex flex-col">
      <div class="header-title text-center py-5 text-xl font-medium text-gray-700">物流运输审批管理/差旅费报销</div>
      <!-- 添加 Tabs 组件-->
      <el-tabs v-model="activeTab" class="tabs-container mt-5">
        <el-tab-pane label="物流运输审批管理" name="logistics">
          <div class="content-area flex-1 border border-gray-300 p-5 flex">
            <!-- 左侧功能区（物流相关） -->
            <div class="left-section flex-1 border border-gray-300 p-3">
              <div class="assistant-box border border-gray-300 p-3 my-3">
                <h4 class="text-lg font-semibold text-gray-700">物流运输审批流程辅助小助手</h4>
                <div class="assistant-box border border-gray-300 p-3 my-3">
                  <h5 class="text-md font-semibold text-gray-700">物流运输审批流程辅助</h5>
                  <p class="text-gray-600">在提交通输单据过程中不知渠道规范、怎么提交可以询问小助手</p>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="差旅费报销管理" name="reimbursement">
          <div class="content-area flex-1 border border-gray-300 p-5 flex">
            <!-- 右侧功能区（差旅费相关） -->
            <div class="right-section flex-1 border border-gray-300 p-3">
              <div class="assistant-box border border-gray-300 p-3 my-3">
                <h4 class="text-lg font-semibold text-gray-700">差旅费小助手头像</h4>
                <div class="assistant-box border border-gray-300 p-3 my-3">
                  <h5 class="text-md font-semibold text-gray-700">差旅费报销全流程辅助</h5>
                  <p class="text-gray-600">助手作用描述</p>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { ElTabs, ElTabPane } from 'element-plus';
import { API_BASE_URL } from '../config'; // 导入公共变量

export default {
  components: {
    ElTabs,
    ElTabPane
  },
  data() {
    return {
      filteredMenus: [],
      activeTab: 'logistics',
      loading: true,
      error: null
    };
  },
  async created() {
    try {
      const response = await fetch(`${API_BASE_URL}/api/user-menu`);
      if (!response.ok) {
        throw new Error('网络响应不是 OK');
      }
      this.filteredMenus = await response.json();
    } catch (err) {
      this.error = '获取用户菜单失败: ' + err.message;
    } finally {
      this.loading = false;
    }
  }
};
</script>

<style scoped>
/* 引入 Tailwind CSS 类 */
/* 这里可以根据需要添加自定义样式 */
</style>